<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Spring Boot Web开发测试</title>
	<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
	<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
	<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript">
$(document).ready(function(){
	findBooks();
});
function findBooks(){
	$.post("/findBooks",null,
			function(data){
		$.each(data,function(){
			var tr  = $("<tr/>");
			$("<img/>").attr("src","images/"+this.image).attr("height",60).appendTo("<td/>").appendTo(tr);
            $("<td/>").html(this.name).appendTo(tr);
            $("<td/>").html(this.author).appendTo(tr);
            $("#booktable").append(tr);
        })
	},"json");
}
</script>
</head>
<body>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">Spring Boot中集合转换JSON</h3>
		</div>
	</div>
	<!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
	<div class="container">
		<div class="col-md-12">
			<div class="panel panel-primary">
				<!-- .panel-heading 面板头信息。 -->
				<div class="panel-heading">
					<!-- .panel-title 面板标题。 -->
			  	  <h3 class="panel-title">图书信息列表</h3>
			  </div>
			  <div class="panel-body">
				<!-- table-responsive:响应式表格,在一个表展示所有的数据,当不够显示的时候可以左右滑动浏览-->
				<div class="table table-responsive">
					<!--
						 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
	                	.table-bordered 类为表格和其中的每个单元格增加边框。
	                	.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
	                -->
					<table class="table table-bordered table-hover" id="booktable">
						<thead>
							<tr>
								<th class="text-center">封面</th >
								<th class="text-center">书名</th>
								<th class="text-center">作者</th >
							</tr>
						</thead>
						<tbody class="text-center"></tbody>
					</table>
				</div>
			</div>
			</div>
		</div>
	</div>
</body>
</html>